<template>
  <a-modal
    title="编辑权限"
    v-model="$parent.showModel"
    @ok="save"
    @cancel="cancel"
    okText="保存"
    cancelText="取消"
  >
    <a-form :form="form">
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="权限名称"
      >
        <a-input
          v-decorator="[
          'permission_name',
          {rules: [{ required: true, message: '请输入权限名称' }]}
        ]"
          placeholder="请输入权限名称"
        />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="权限类型"
      >
        <a-select
          placeholder="请选择权限类型"
          v-decorator="[
          'permission_type',
          {rules: [{required: true, message: '请选择权限类型' }]}
        ]"
        >
          <a-select-option
            v-for="(item,index) in permissionType"
            :key="index"
            :value="item.type_value"
          >{{item.type_name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="权限排序"
      >
        <a-input-number
          style="width:100%"
          v-decorator="[
          'order_num',
          {rules: [{required: true, message: '请输入权限排序' }]}
        ]"
          placeholder="请输入权限排序"
        />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="权限内容"
      >
        <a-input
          v-decorator="[
          'permission_content',
          {rules: [{required: true, message: '请输入权限内容' }]}
        ]"
          placeholder="请输入权限内容"
        />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="附加内容"
      >
        <a-input v-decorator="['extra']" placeholder="请输入附加内容" />
      </a-form-item>
      <a-form-item v-show="false">
        <a-input v-decorator="['id']" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 }
};
export default {
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      permissionType: []
    };
  },
  created() {
    this.getPermissionType();
  },
  methods: {
    async getPermissionType() {
      let permissionType = await this.$post(
        "/system/permission/permissionType"
      );
      this.permissionType = permissionType.data;
    },
    save() {
      this.form.validateFields(async (err, values) => {
        if (err) return;
        let level_num = this.$parent.curLevel;
        values.parent_id = this.$emptyId;
        let permissions = this.$parent.permissions;
        if (level_num > 0) {
          let parent = permissions[level_num - 1].find(v => v.selected == true);
          if (parent) values.parent_id = parent.id;
        }
        if(!values.id) values.id = this.$emptyId;
        let result = await this.$post("/system/permission/save", values);
        if (result.error) return;
        this.$notification.success({
          message: "保存成功"
        });
        this.form.resetFields();
        this.$parent.showModel = false;
        let insertIndex = 0;
        let delNum = 0;
        if (values.id != this.$emptyId) {
          insertIndex = permissions[level_num].findIndex(
            v => v.id == values.id
          );
          result.data.selected = true;
          delNum = 1;
        } else {
          insertIndex = permissions[level_num].findIndex(
            v => v.order_num > result.data.order_num
          );
          if (insertIndex < 0) insertIndex = permissions[level_num].length;
        }
        permissions[level_num].splice(insertIndex, delNum, result.data);
      });
    },
    cancel() {
      this.form.resetFields();
      this.$parent.showModel = false;
    }
  }
};
</script>
